<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-map-flight/Flight.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a><ul class='methods'><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.createTileGrid">createTileGrid</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.optionsFromMapJSON">optionsFromMapJSON</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#changeTilesVersion">changeTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#createLayerUrl">createLayerUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getAllRequestParams">getAllRequestParams</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getFullRequestUrl">getFullRequestUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getRequestParamString">getRequestParamString</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#lastTilesVersion">lastTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#mergeTileVersionParam">mergeTileVersionParam</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#nextTilesVersion">nextTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#setTileSetsInfo">setTileSetsInfo</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#updateCurrentTileSetsIndex">updateCurrentTileSetsIndex</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_map_mixins_feature.html">$ui/map/mixins/feature</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~setStyle">setStyle</a></li></ul></li><li><a href="module-$ui_map_mixins_image.html">$ui/map/mixins/image</a></li><li><a href="module-$ui_map_mixins_stroke.html">$ui/map/mixins/stroke</a></li><li><a href="module-$ui_map_my-draw.html">$ui/map/my-draw</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-draw.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~finish">finish</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~getFeatures">getFeatures</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~removeFeature">removeFeature</a></li></ul></li><li><a href="module-$ui_map_my-map.html">$ui/map/my-map</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~clickTrigger">clickTrigger</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~dispose">dispose</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureAtPixel">getFeatureAtPixel</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureVM">getFeatureVM</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getLayer">getLayer</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getMetersPerUnit">getMetersPerUnit</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~mapReady">mapReady</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~moveTo">moveTo</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~removeFeature">removeFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~resize">resize</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setActive">setActive</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setCursor">setCursor</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomIn">zoomIn</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomOut">zoomOut</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomTo">zoomTo</a></li></ul></li><li><a href="module-$ui_map_my-map-circle.html">$ui/map/my-map-circle</a></li><li><a href="module-$ui_map_my-map-cluster.html">$ui/map/my-map-cluster</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~draw">draw</a></li></ul></li><li><a href="module-$ui_map_my-map-flight.html">$ui/map/my-map-flight</a></li><li><a href="module-$ui_map_my-map-geo.html">$ui/map/my-map-geo</a></li><li><a href="module-$ui_map_my-map-heat.html">$ui/map/my-map-heat</a></li><li><a href="module-$ui_map_my-map-html.html">$ui/map/my-map-html</a></li><li><a href="module-$ui_map_my-map-icon.html">$ui/map/my-map-icon</a></li><li><a href="module-$ui_map_my-map-image.html">$ui/map/my-map-image</a></li><li><a href="module-$ui_map_my-map-layers.html">$ui/map/my-map-layers</a></li><li><a href="module-$ui_map_my-map-line.html">$ui/map/my-map-line</a></li><li><a href="module-$ui_map_my-map-link.html">$ui/map/my-map-link</a></li><li><a href="module-$ui_map_my-map-marker.html">$ui/map/my-map-marker</a></li><li><a href="module-$ui_map_my-map-measure.html">$ui/map/my-map-measure</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-measure.html#~clear">clear</a></li></ul></li><li><a href="module-$ui_map_my-map-overview.html">$ui/map/my-map-overview</a></li><li><a href="module-$ui_map_my-map-palette.html">$ui/map/my-map-palette</a></li><li><a href="module-$ui_map_my-map-panel.html">$ui/map/my-map-panel</a></li><li><a href="module-$ui_map_my-map-placement.html">$ui/map/my-map-placement</a></li><li><a href="module-$ui_map_my-map-pointer.html">$ui/map/my-map-pointer</a></li><li><a href="module-$ui_map_my-map-polygon.html">$ui/map/my-map-polygon</a></li><li><a href="module-$ui_map_my-map-popup.html">$ui/map/my-map-popup</a></li><li><a href="module-$ui_map_my-map-rectangle.html">$ui/map/my-map-rectangle</a></li><li><a href="module-$ui_map_my-map-scale.html">$ui/map/my-map-scale</a></li><li><a href="module-$ui_map_my-map-scatter.html">$ui/map/my-map-scatter</a></li><li><a href="module-$ui_map_my-map-text.html">$ui/map/my-map-text</a></li><li><a href="module-$ui_map_my-map-track.html">$ui/map/my-map-track</a></li><li><a href="module-$ui_map_my-map-zoom.html">$ui/map/my-map-zoom</a></li><li><a href="module-$ui_map_utils_style.html">$ui/map/utils/style</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_style.html#~parse">parse</a></li></ul></li><li><a href="module-$ui_map_utils_util.html">$ui/map/utils/util</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_util.html#.coordinateEqual">coordinateEqual</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createBezierCurvePoints">createBezierCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createCurvePoints">createCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createLinePathPoints">createLinePathPoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.factorial">factorial</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.geoJsonDecode">geoJsonDecode</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.getDistance">getDistance</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.mergeProps">mergeProps</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.parseDecimal">parseDecimal</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.svgToImg">svgToImg</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="module-$ui_map_my-map-cluster.html#~event:change">change</a></li><li><a href="module-$ui_map_my-map-panel.html#~event:close">close</a></li><li><a href="module-$ui_map_my-map-pointer.html#~event:copy">copy</a></li><li><a href="module-$ui_map_my-draw.html#~event:drawend">drawend</a></li><li><a href="module-$ui_map_my-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-$ui_map_my-map-measure.html#~event:end">end</a></li><li><a href="module-$ui_map_my-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-$ui_map_my-draw.html#~event:modifystart">modifystart</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-$ui_map_my-map-geo.html#~event:ready">ready</a></li><li></li></ul><h3>Interfaces</h3><ul><li><a href="module-$ui_map_mixins_feature.methods.drawHandler.html">drawHandler</a></li><li><a href="module-$ui_map_mixins_feature.methods.modifyHandler.html">modifyHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createEzMapLayer">createEzMapLayer</a></li><li><a href="global.html#createFcMapLayer">createFcMapLayer</a></li><li><a href="global.html#createFounderLayer">createFounderLayer</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createSuperLayer">createSuperLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#createTdtLayerGroup">createTdtLayerGroup</a></li><li><a href="global.html#props">props</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-map-flight/Flight.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * Flight 航线组件
 * @module $ui/map/my-map-flight
 */
import strokeMixin from '../../mixins/stroke'
import featureMixin from '../../mixins/feature'
import LineString from 'ol/geom/LineString'
import Point from 'ol/geom/Point'
import Feature from 'ol/Feature'
import {createCurvePoints, createLinePathPoints, coordinateEqual} from '../../utils/util'
import createArrow from '../../utils/arrow'
import parseStyle from '../../utils/style'

// 默认线动效样式
const defaultLineEffect = {
  color: '#409eff',
  lineDash: null
}

// 默认点动效样式
const defaultPointEffect = {
  circle: {
    fill: '#409eff',
    radius: 3
  }
}

/**
 * 属性参数, 继承 [$ui/map/mixins/feature]{@link module:$ui/map/mixins/feature}
 * @member props
 * @property {number[]} from 起点
 * @property {number[]} to 终点
 * @property {number} [radius=0] 曲线半径度数, 默认为0,直线
 * @property {number} [angle=90] 曲线角度，radius与 angle结合可定义曲线的形状
 * @property {string|boolean|object} [arrow] 终点箭头
 * @property {string} [color] 颜色
 * @property {number} [width] 线条宽度
 * @property {string} [lineCap]
 * @property {string} [lineJoin]
 * @property {number[]} [lineDash]
 * @property {number} [lineDashOffset]
 * @property {number} [delay] 动画延时开始
 * @property {boolean} [loop] 动画循环
 * @property {number} [space=0.01] 分割点的距离，可通过改设置控制动画移动的速度，值越大速度越快
 * @property {number} [smooth=0.01] 平滑度，越小线越平滑
 * @property {boolean|object|function} [lineEffect=true] 线动画样式配置
 * @property {boolean|object|function} [pointEffect=false] 点动画样式配置
 */
export default {
  name: 'MyMapFlight',
  mixins: [strokeMixin, featureMixin],
  props: {
    // 起点
    from: Array,
    // 终点
    to: Array,
    // 曲线半径度数
    radius: {
      type: Number,
      default: 0
    },
    // 曲线角度
    angle: {
      type: Number,
      default: 90
    },
    // 箭头
    arrow: [Boolean, String, Object],
    delay: {
      type: Number,
      default: 0
    },
    loop: {
      type: Boolean,
      default: true
    },
    space: {
      type: Number,
      default: 0.01
    },
    // 平滑度，越小线越平滑
    smooth: {
      type: Number,
      default: 0.01
    },
    color: {
      type: String,
      default: 'rgba(64, 158, 255, 0.5)'
    },
    lineDash: {
      type: Array,
      default() {
        return [5]
      }
    },
    lineEffect: {
      type: [Boolean, Object, Function],
      default() {
        return defaultLineEffect
      }
    },
    pointEffect: {
      type: [Boolean, Object, Function],
      default: false
    }
  },
  methods: {
    createPoints() {
      const line = this.radius > 0
        ? createCurvePoints(this.from, this.to, this.radius, this.angle, this.smooth)
        : [this.from, this.to]
      return this.space ? createLinePathPoints(line, this.space) : line
    },
    drawHandler() {
      const points = this.createPoints()
      return new LineString(points)
    },
    modifyHandler(geometry) {
      geometry.setCoordinates(this.createPoints())
    },
    createArrowStyle(coordinates, strokeProps = {}) {
      const length = coordinates.length
      let index = 0
      const to = coordinates[length - 1]
      let from = to
      while (from &amp;&amp; coordinateEqual(from, to)) {
        ++index
        from = coordinates[length - index]
      }
      return createArrow(from || to, to, this.arrow, {color: strokeProps.color || this.color})
    },
    createLineEffectStyle(feature, strokeProps = {}) {
      const styles = this.createLineStyle(strokeMixin.props, strokeProps)
      const coordinates = feature.getGeometry().getCoordinates()
      if (this.arrow) {
        const arrowStyle = this.createArrowStyle(coordinates, strokeProps)
        styles.push(arrowStyle)
      }
      return styles
    },
    createPointEffectStyle(feature, pointEffect) {
      if (!this.pointEffect) return null
      return parseStyle({
        ...defaultPointEffect,
        ...pointEffect
      })
    },
    setStyle() {
      if (!this.feature) return
      const style = this.createLineEffectStyle(this.feature)
      this.feature.setStyle(style)
      this.lineEffect &amp;&amp; this.lineDelayStart(this.lineEffectRender)
      this.pointEffect &amp;&amp; this.pointDelayStart(this.pointEffectRender)
    },
    lineEffectRender() {
      const geometry = this.feature.getGeometry()
      const coordinates = geometry.getCoordinates()
      const length = coordinates.length
      if (!this.lineEffectFeature) {
        this.lineEffectFeature = new Feature(new LineString([coordinates[0]]))
        this.myMap.addFeature(this.lineEffectFeature)
      }
      const feature = this.lineEffectFeature
      let fraction = 0
      // eslint-disable-next-line no-unused-vars
      const animate = () => {
        ++fraction
        if (fraction > length) {
          this.loop &amp;&amp; this.lineEffectRender()
          return
        }
        const points = coordinates.slice(0, fraction + 1)
        const line = new LineString(points)
        const style = typeof this.lineEffect === 'function'
          ? this.lineEffect({feature, fraction, points, line, vm: this})
          : this.createLineEffectStyle(feature, {
            ...defaultLineEffect,
            ...this.lineEffect
          })
        feature.setGeometry(line)
        feature.setStyle(style)
        window.requestAnimationFrame(animate)
      }
      animate()
    },
    pointEffectRender() {
      const geometry = this.feature.getGeometry()
      const coordinates = geometry.getCoordinates()
      const length = coordinates.length - 1
      if (!this.pointEffectFeature) {
        this.pointEffectFeature = new Feature(new Point(coordinates[0]))
        this.myMap.addFeature(this.pointEffectFeature)
      }
      const feature = this.pointEffectFeature
      let fraction = 0
      // eslint-disable-next-line no-unused-vars
      const animate = () => {
        ++fraction
        if (fraction > length) {
          this.loop &amp;&amp; this.pointEffectRender()
          return
        }
        const coordinate = coordinates[fraction]
        const point = new Point(coordinate)
        const style = typeof this.pointEffect === 'function'
          ? this.pointEffect({feature, fraction, coordinates, coordinate, point, vm: this})
          : this.createPointEffectStyle(feature, this.pointEffect)
        feature.setGeometry(point)
        feature.setStyle(style)
        window.requestAnimationFrame(animate)
      }
      animate()
    },
    lineDelayStart(func) {
      if (this.delay) {
        clearTimeout(this.lineDelayId)
        this.lineDelayId = setTimeout(func, this.delay)
      } else {
        func()
      }
    },
    pointDelayStart(func) {
      if (this.delay) {
        clearTimeout(this.pointDelayId)
        this.pointDelayId = setTimeout(func, this.delay)
      } else {
        func()
      }
    }
  },
  beforeDestroy() {
    if (this.lineEffectFeature) {
      this.myMap.removeFeature(this.lineEffectFeature)
    }
    if (this.pointEffectFeature) {
      this.myMap.removeFeature(this.pointEffectFeature)
    }
    this.pointDelayId &amp;&amp; clearTimeout(this.pointDelayId)
    this.lineDelayId &amp;&amp; clearTimeout(this.lineDelayId)
  }
}
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a> on Fri May 29 2020 15:27:11 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
